<template>
    <div class="platform-page page">
        <img width="100%" src="/images/coach_training_banner.jpg"/>
        <div class="content">
            <PlatformCrumb back="返回" style="margin-top: 0;">
            </PlatformCrumb>
            <div class="content event-detail">
                <div class="qy_detailbody">
                    <div class="qy_detailbodytitle">
                        <span>基本资料</span>
                    </div>
<!--                    机构基本信息-->
                    <div class="qy_detailbody1 jgjbzl">
                        <img class="qiuyuanimg" :src="jgdetail.logoImg|filtersImg" alt="">
                        <div class="qy_detailbody1z">
                            <h3>{{jgdetail.name}}</h3>
                            <p><img src="../../assets/icon1.png" alt="">负责人：{{jgdetail.leaderName}}</p>
                            <p><img src="../../assets/icon1.png" alt="">联系电话：{{jgdetail.leaderPhone}}</p>
                            <p><img src="../../assets/weixin.png" alt="">微信：{{jgdetail.weChatNo}}</p>
                            <p><img src="../../assets/youxiang.png" alt="">邮箱：{{jgdetail.mail}}</p>
                            <p><img src="../../assets/zhengjian.png" alt="">证件号码：{{jgdetail.leaderNo}}</p>
                            <p><img src="../../assets/jigou.png" alt="">机构地址：{{jgdetail.address}}
                            </p>
                        </div>
                    </div>
                    <div class="qy_detailbodytitle yyzztt">
                        <span><i></i>营业执照</span>
                    </div>
                    <div class="zhengshulist">
                        <img :src="jgdetail.businessLicence|filtersImg" alt="">
                    </div>
                    <div class="qy_detailbodytitle">
                        <span>旗下教练</span>
                    </div>
                    <div class="table">
                        <el-table
                                :header-cell-style="{background:'#F7F7F7',color:'#333333'}"
                                ref="multipleTable"
                                :data="jiaolianlist"
                                stripe
                                tooltip-effect="dark"
                                style="width: 100%"
                        >
                            <el-table-column align="center" label="序号" type="index" width="120">
                                <!--                        <template slot-scope="scope">-->
                                <!--                            {{ scope.row.date }}-->
                                <!--                        </template>-->
                            </el-table-column>
                            <el-table-column align="left" prop="name" label="教练" width="120">
                                <!--插入图片链接的代码-->
                                <template slot-scope="scope">
                                    <img
                                            :src="scope.row.imgs|filtersImg"
                                            alt
                                            style="width: 36px;height: 36px;margin:1px;border:1px solid #BBBDBF;vertical-align: middle;"
                                    >
                                    {{ scope.row.name }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="coachLevel" label="等级"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="position" label="职位"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="courseCount" label="课程"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="teamCount" label="队伍"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="rank" label="星级"
                                             show-overflow-tooltip></el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                    @current-change="handleCurrentChange"
                                    background :page-size="page2.pageSize" layout="total, prev, pager, next"
                                    :total="jiaototal"
                            ></el-pagination>
                        </div>
                    </div>
                    <div class="qy_detailbodytitle">
                        <span>旗下球员</span>
                    </div>
                    <div class="table">
                        <el-table
                                :header-cell-style="{background:'#F7F7F7',color:'#333333'}"
                                ref="multipleTable"
                                :data="qylist"
                                stripe
                                tooltip-effect="dark"
                                style="width: 100%"
                        >
                            <el-table-column align="center" label="序号" type="index" width="120">
                                <!--                        <template slot-scope="scope">-->
                                <!--                            {{ scope.row.date }}-->
                                <!--                        </template>-->
                            </el-table-column>
                            <el-table-column align="left" prop="name" label="球员" width="120">
                                <!--插入图片链接的代码-->
                                <template slot-scope="scope">
                                    <img
                                            :src="scope.row.imgs|filtersImg"
                                            alt
                                            style="width: 36px;height: 36px;margin:1px;border:1px solid #BBBDBF;vertical-align: middle;"
                                    >
                                    {{ scope.row.name }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="age" label="年龄"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="number" label="号码"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="goodLocation" label="擅长位置"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="sumScoure" label="综合能力"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="count" label="课程"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="grouping" label="分组"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" prop="wound" label="伤病备注"
                                             show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span style="color: red">{{ scope.row.wound }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                    @current-change="handleCurrentChangeqy"
                                    background :page-size="qypage2.pageSize" layout="total, prev, pager, next"
                                    :total="qytotal"
                            ></el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {coachfindList, getCoachList, mechanismget, mechanismfindList} from '../../api/api/platform.js';
    import {baseImgPath, basefile} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb
        },
        data() {
            return {
                id: this.$route.query.id,
                data: {
                    id: this.$route.query.id
                },
                isshow: false,
                jgdetail: {
                    "id": 0,
                    "userId": 29,
                    "name": "",
                    "addressInfo": "",
                    "address": "",
                    "leaderName": "",
                    "leaderPhone": "",
                    "phone": "",
                    "leaderNo": "",
                    "weChatNo": "",
                    "mail": "",
                    "type": 0,
                    "status": 0,
                    "createTime": 1560584128000,
                    "updateTime": 1560584128000,
                    "reason": null,
                    "passTime": null,
                    "homeImgs": null,
                    "businessLicence": null,
                    "logoImg": null,
                    "banner": null,
                    "info": null,
                    "trainingFacilities": null,
                    "trainingVideo": null,
                    "message": null,
                    "courses": null,
                    "teams": null,
                    "matchs": null,
                    "publicName": null,
                    "publicImg": null,
                    "infoAddress": null,
                    "infoPhone": null,
                    "infoMail": null
                },
                page: {
                    "coachId": this.$route.query.id,
                    "pageNum": 1,
                    "pageSize": 10
                },
                list: [],
                total: 0,
                page2: {
                    "mechanismId": this.$route.query.id,
                    "pageNum": 1,
                    "pageSize": 10,
                    "type": 0
                },
                qypage2: {
                    "id": this.$route.query.id,
                    "pageNum": 1,
                    "pageSize": 10,
                },
                jiaolianlist: [],
                jiaototal: 0,
                qylist: [],
                qytotal: 0
            };
        },
        created() {
            this.mechanismfindList()
            this.getCoachList()
            this.mechanismget()
        },
        methods: {
            // 教练分页
            handleCurrentChange(val) {
                this.page2.pageNum = val
                this.getCoachList()
            },
            // 球员分页
            handleCurrentChangeqy(val) {
                this.qypage.pageNum = val
                this.mechanismfindList()
            },
// 获取球员
            mechanismfindList() {
                var that = this;
                mechanismfindList(this.qypage2).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        that.qylist = res.data.list
                        that.qytotal = res.data.total
                    }
                });
            }
            ,
            // 获取教练
            getCoachList() {
                var that = this;
                getCoachList(this.page2).then(res => {
                    if (res.code == 200) {
                        that.jiaolianlist = res.data.list
                        that.jiaototal = res.data.total
                    }
                });
            }
            ,
            // 获取详情
            mechanismget() {
                var that = this;
                mechanismget(this.data).then(res => {
                    if (res.code == 200) {
                        that.jgdetail = res.data
                    }
                });
            }
            ,
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        },
    };
</script>

<style lang="less" scoped>
    @import url("platform.less");

    .operation {
        margin-right: 25px;
    }
</style>
